<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- <link rel="stylesheet" href="./cs/one_questions.css"> -->
	<title>{{number}}.{{title}}</title>
	<!-- 引入ACE插件 -->
	<!-- 官网链接：https://ace.c9.io/ -->
	<!-- CDN链接：https://cdnjs.com/libraries/ace -->
	<!-- 使用介绍：https://www.iteye.com/blog/ybc77107-2296261 -->
	<!-- https://justcode.ikeepstudying.com/2016/05/ace-editor-%E5%9C%A8%E7%BA%BF%E4%BB%A3%E7%A0%81%E7%BC%96%E8%BE%91%E6%9E%81%E5%85%B6%E9%AB%98%E4%BA%AE/ -->
	<!-- 引入ACE CDN -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript"
		charset="utf-8"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js" type="text/javascript"
		charset="utf-8"></script>
	<!-- 引入jquery CDN -->
	<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

	<!-- <style>
        * {
			margin: 0;
			padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        .container .navbar {
            width: 100%;
            height: 50px;
            background-color: black;
            /* 给父级标签设置overflow，取消后续float带来的影响 */
            overflow: hidden;
        }

        .container .navbar a {
            /* 设置a标签是行内块元素，允许你设置宽度 */
            display: inline-block;
            /* 设置a标签的宽度,a标签默认行内元素，无法设置宽度 */
            width: 80px;
            /* 设置字体颜色 */
            color: white;
            /* 设置字体的大小 */
            font-size: large;
            /* 设置文字的高度和导航栏一样的高度 */
            line-height: 50px;
            /* 去掉a标签的下划线 */
            text-decoration: none;
            /* 设置a标签中的文字居中 */
            text-align: center;
        }

        /* 设置鼠标事件 */
        .container .navbar a:hover {
            background-color: green;
        }

        .container .navbar .login {
            float: right;
        }
        
        .container .part1 {
            width: 100%;
            height: 600px;
            overflow: hidden;
        }

        .container .part1 .left_desc {
            width: 50%;
            height: 600px;
            float: left;
            overflow: scroll;
        }

        .container .part1 .left_desc h3 {
            padding-top: 10px;
            padding-left: 10px;
        }

        .container .part1 .left_desc pre {
            padding-top: 10px;
            padding-left: 10px;
            font-size: medium;
            font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        }

        .container .part1 .right_code {
            width: 50%;
            float: right;
        }

        .container .part1 .right_code .ace_editor {
            height: 600px;
        }
        .container .part2 {
            width: 100%;
            overflow: hidden;
        }

        .container .part2 .result {
            width: 300px;
            float: left;
        }

        .container .part2 .btn-submit {
            width: 120px;
            height: 50px;
            font-size: large;
            float: right;
            background-color: #26bb9c;
            color: #FFF;
            /* 给按钮带上圆角 */
            /* border-radius: 1ch; */
            border: 0px;
            margin-top: 10px;
            margin-right: 10px;
        }
        .container .part2 button:hover {
            color:green;
        }

        .container .part2 .result {
            margin-top: 15px;
            margin-left: 15px;
        }

        .container .part2 .result pre {
            font-size: large;
        }
    </style> -->

	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		:root {
			--primary-color: #2c3e50;
			--secondary-color: #3498db;
			--accent-color: #e74c3c;
			--light-bg: #f8f9fa;
			--text-dark: #2c3e50;
			--text-light: #ecf0f1;
			--success-color: #4285f4;
			--error-color: #e74c3c;
		}

		html {
			scroll-behavior: smooth;
		}

		body {
			background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
			min-height: 100vh;
		}

		/* 统一导航栏样式 */
		.container .navbar {
			background: var(--primary-color);
			height: 60px;
			padding: 0 20px;
			position: fixed;
			width: 100%;
			top: 0;
			z-index: 1000;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		}

		.container .navbar a {
			color: var(--text-light);
			padding: 0 20px;
			line-height: 60px;
			transition: all 0.3s ease;
			position: relative;
			font-weight: 500;
		}

		.container .navbar a:hover {
			background: var(--secondary-color);
		}

		.container .navbar .login {
			float: right;
			background: var(--secondary-color);
			padding: 0 25px;
		}

		/* 主内容区域 */
		.container .part1 {
			display: flex;
			height: calc(100vh - 140px);
			margin-top: 60px;
			padding: 20px;
			gap: 20px;
		}

		.left_desc {
			flex: 1;
			background: white;
			border-radius: 10px;
			padding: 25px;
			box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
			overflow-y: auto;
			animation: fadeInUp 0.8s ease;
		}

		.left_desc h3 {
			color: var(--primary-color);
			font-size: 1.8rem;
			margin-bottom: 1.5rem;
			padding-bottom: 1rem;
			border-bottom: 2px solid var(--secondary-color);
		}

		.left_desc pre {
			white-space: pre-wrap;
			line-height: 1.6;
			color: var(--text-dark);
			font-size: 1rem;
		}

		.right_code {
			flex: 1;
			border-radius: 10px;
			overflow: hidden;
			box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
			position: relative;
			min-height: 300px;
		}

		/* 代码编辑器 */
		.ace_editor {
			height: 100% !important;
			/* 强制高度 */
			min-height: 300px;
			/* 最小高度保障 */
		}

		/* 提交区域 */
		.part2 {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 80px;
			background: white;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30px;
			box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.1);
		}

		.btn-submit {
			background: var(--secondary-color) !important;
			color: white !important;
			padding: 12px 40px !important;
			border-radius: 25px !important;
			font-weight: 600 !important;
			transition: all 0.3s ease !important;
			border: none !important;
			cursor: pointer;
			box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
		}

		.btn-submit:hover {
			transform: translateY(-2px);
			box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
			color: white !important;
		}

		.result {
			flex: 1;
			background: var(--light-bg);
			padding: 12px 20px;
			border-radius: 8px;
			margin-right: 20px;
			max-height: 60px;
			overflow-y: auto;
		}

		.result pre {
			margin: 0;
			font-family: monospace;
			color: var(--text-dark);
		}

		/* 响应式设计 */
		@media (max-width: 768px) {
			.container .navbar a:not(.login) {
				display: none;
			}

			.part1 {
				flex-direction: column;
				height: auto;
				padding: 15px;
			}

			.left_desc,
			.right_code {
				flex: none;
				height: 50vh;
			}

			.part2 {
				height: 70px;
				padding: 0 15px;
			}

			.btn-submit {
				padding: 10px 30px !important;
			}

			.container .part1 {
				height: auto;
				min-height: calc(100vh - 140px);
			}

			.right_code {
				height: 400px;
				/* 固定移动端编辑器高度 */
			}

			.result {
				max-height: 150px;
			}
		}
	</style>

</head>

<body>
	<div class="container">
		<!-- 导航栏， 功能不实现-->
		<div class="navbar">
			<a href="/">首页</a>
			<a href="/all_questions">题库</a>
		</div>
		<!-- 左右呈现，题目描述和预设代码 -->
		<div class="part1">
			<div class="left_desc">
				<h3><span id="number">{{number}}</span>.{{title}}_{{star}}</h3>
				<pre>{{desc}}</pre>
			</div>
			<div class="right_code">
				<pre id="code" class="ace_editor"><textarea class="ace_text-input">{{pre_code}}</textarea></pre>
			</div>
		</div>
		<!-- 提交并且得到结果，并显示 -->
		<div class="part2">
			<div class="result"></div>
			<button class="btn-submit" onclick="submit()">提交代码</button>
		</div>
	</div>

	<script>
		//初始化对象
		editor = ace.edit("code");

		//设置风格和语言（更多风格和语言，请到github上相应目录查看）
		// 主题大全：http://www.manongjc.com/detail/25-cfpdrwkkivkikmk.html
		editor.setTheme("ace/theme/monokai");
		editor.session.setMode("ace/mode/c_cpp");

		// 字体大小
		editor.setFontSize(16);
		// 设置默认制表符的大小:
		editor.getSession().setTabSize(4);

		// 设置只读（true时只读，用于展示代码）
		editor.setReadOnly(false);

		// 启用提示菜单
		ace.require("ace/ext/language_tools");
		editor.setOptions({
			enableBasicAutocompletion: true,
			enableSnippets: true,
			enableLiveAutocompletion: true
		});

		function submit() {
			// alert("嘿嘿!");
			// 1. 收集当前页面的有关数据, 1. 题号 2.代码
			var code = editor.getSession().getValue();
			// console.log(code);
			var number = $(".container .part1 .left_desc h3 #number").text();
			// console.log(number);
			var judge_url = "/judge/" + number;
			// console.log(judge_url);
			// 2. 构建json，并通过ajax向后台发起基于http的json请求
			$.ajax({
				method: 'Post',   // 向后端发起请求的方式
				url: judge_url,   // 向后端指定的url发起请求
				dataType: 'json', // 告知server，我需要什么格式
				contentType: 'application/json;charset=utf-8',  // 告知server，我给你的是什么格式
				data: JSON.stringify({
					'code': code,
					'input': ''
				}),
				success: function (data) {
					//成功得到结果
					// console.log(data);
					show_result(data);
				}
			});
			// 3. 得到结果，解析并显示到 result中
			function show_result(data) {
				// console.log(data.status);
				// console.log(data.reason);
				// 拿到result结果标签
				var result_div = $(".container .part2 .result");
				// 清空上一次的运行结果
				result_div.empty();

				// 首先拿到结果的状态码和原因结果
				var _status = data.status;
				var _reason = data.reason;

				var reason_lable = $("<p>", {
					text: _reason
				});
				reason_lable.appendTo(result_div);

				if (status == 0) {
					// 请求是成功的，编译运行过程没出问题，但是结果是否通过看测试用例的结果
					var _stdout = data.stdout;
					var _stderr = data.stderr;

					var stdout_lable = $("<pre>", {
						text: _stdout
					});

					var stderr_lable = $("<pre>", {
						text: _stderr
					})

					stdout_lable.appendTo(result_div);
					stderr_lable.appendTo(result_div);
				}
				else {
					// 编译运行出错,do nothing
				}

				var result_div = $(".result");
				result_div.empty().css({
					"background": data.status === 0 ? "var(--success-color)" : "var(--error-color)",
					"color": "white"
				});

				var content = data.reason + "\n";
				if (data.status === 0) {
					content += "输出:\n" + data.stdout;
					if (data.stderr) content += "\n错误:\n" + data.stderr;
				}

				result_div.append($("<pre>").text(content));
			}
		}
	</script>
</body>

</html>